<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" th:href="@{favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css(v=3.3.6)}"
          rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" th:href="@{/static/css/font-awesome.css(v=4.4.0)}"
          rel="stylesheet">

    <!--BootStrap_Table样式-->
    <link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css"
          th:href="@{/static/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="../../static/css/plugins/sweetalert/sweetalert.css"
          th:href="@{/static/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
    <!--滑动checkbox-->
    <link href="../../static/css/plugins/switchery/switchery.css"
          th:href="@{/static/css/plugins/switchery/switchery.css}"
          rel="stylesheet">
    <!--summernote文本编辑器-->
    <link href="../../static/css/plugins/summernote/summernote.css"
          th:href="@{/static/css/plugins/summernote/summernote.css}" rel="stylesheet">
    <link href="../../static/css/plugins/summernote/summernote-bs3.css"
          th:href="@{/static/css/plugins/summernote/summernote-bs3.css}" rel="stylesheet">

    <link href="../../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet">
    <style type="text/css">
        .table > thead > tr > th    {
            color: #2a62bc;
        }
        .form-inline>.btn:not(.query){
            margin-left: 0.8%;
            float: right;
        }
    </style>
</head>

<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <table id="chapter_table" data-mobile-responsive="true"></table>
        </div>
    </div>
    <div id="toolbar2">
        <button type="button" class="btn btn-primary" id="addChapterBtn">添加章</button>
    </div>
</div>
<!--添加章  模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="addChapterModel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" id="addChapterForm">
                    <div class="form-group">
                        <label for="add_courseName" class="col-sm-2 control-label">课程名称:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="add_courseName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="add_chapterNumber" class="col-sm-2 control-label">章编号:</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="add_chapterNumber">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alter_chapterName" class="col-sm-2 control-label">章名称:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="add_chapterName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alter_status" class="col-sm-2 control-label">是否启用:</label>
                        <div class="col-sm-8">
                            <input type="checkbox" class="form-control js-switch" id="add_status" checked/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alter_chapterDesc" class="col-sm-2 control-label">章描述:</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" rows="4" id="add_chapterDesc"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save_chapter">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--修改章  模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="alterChapterModel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="alter_courseName" class="col-sm-2 control-label">课程名称:</label>
                        <div class="col-sm-8">
                            <input type="text" readonly class="form-control" id="alter_courseName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alter_chapterNumber" class="col-sm-2 control-label">章节编号:</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="alter_chapterNumber">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alter_chapterName" class="col-sm-2 control-label">章节名称:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="alter_chapterName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alter_status" class="col-sm-2 control-label">是否启用:</label>
                        <div class="col-sm-8">
                            <input type="checkbox" class="form-control" id="alter_status" checked/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alter_chapterDesc" class="col-sm-2 control-label">章描述:</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" rows="4" id="alter_chapterDesc"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--添加节  模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="addNodeModel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="addNode_chapterName" class="col-sm-2 control-label">章名称:</label>
                        <div class="col-sm-8">
                            <input type="text" disabled class="form-control" id="addNode_chapterName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addNode_nodeNum" class="col-sm-2 control-label">节编号:</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="addNode_nodeNum">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addNode_nodeName" class="col-sm-2 control-label">节名称:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="addNode_nodeName">
                        </div>
                    </div>
                    <!-- <div class="form-group">
                         <label for="addNode_status" class="col-sm-2 control-label">是否启用:</label>
                         <div class="col-sm-8">
                             <input type="text" class="form-control" id="addNode_status">
                         </div>
                     </div>-->
                    <div class="form-group">
                        <label for="addNode_experiment" class="col-sm-2 control-label">是否实验:</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input type="text" class="form-control" id="addNode_experiment">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle"
                                            data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                            <!--<input type="text" class="form-control" id="addNode_experiment">-->
                        </div>
                    </div>
                    <div class="form-group  hidden n_hidden">
                        <label for="addNode_experiment" class="col-sm-2 control-label">实验简介:</label>
                        <div class="col-sm-8">
                            <!-- <input type="text" class="form-control" id="addNode_experimentDesc">-->
                            <!--富文本框编辑器-->
                            <div id="addNode_experimentDesc"></div>
                        </div>
                    </div>
                    <div class="form-group  hidden n_hidden" id="file-pretty">
                        <label for="addNode_experimentDoc" class="col-sm-2 control-label">实验文档:</label>
                        <div class="col-sm-8">
                            <!-- <input type="file" class="form-control" id="addNode_experimentDoc">-->
                            <input type="file" class="form-control" id="addNode_experimentDoc">
                        </div>
                    </div>
                    <div class="form-group  hidden n_hidden">
                        <label for="addNode_experimentAddr" class="col-sm-2 control-label">实验环境地址:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="addNode_experimentAddr"
                                   placeholder="实验环境地址为放入服务器硬盘上的虚拟机文件地址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addNode_NodeDesc" class="col-sm-2 control-label">节描述:</label>
                        <div class="col-sm-8">
                            <textarea rows="4" class="form-control" id="addNode_NodeDesc"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--修改节  模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="alterNodeModel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="alterNode_chapterName" class="col-sm-2 control-label">章名称:</label>
                        <div class="col-sm-8">
                            <input type="text" disabled class="form-control" id="alterNode_chapterName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alterNode_nodeNum" class="col-sm-2 control-label">节编号:</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="alterNode_nodeNum">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alterNode_nodeName" class="col-sm-2 control-label">节名称:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="alterNode_nodeName">
                        </div>
                    </div>
                    <!-- <div class="form-group">
                         <label for="addNode_status" class="col-sm-2 control-label">是否启用:</label>
                         <div class="col-sm-8">
                             <input type="text" class="form-control" id="addNode_status">
                         </div>
                     </div>-->
                    <div class="form-group">
                        <label for="alterNode_experiment" class="col-sm-2 control-label">是否实验:</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input type="text" class="form-control" id="alterNode_experiment">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle"
                                            data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                            <!--<input type="text" class="form-control" id="addNode_experiment">-->
                        </div>
                    </div>
                    <div class="form-group  hidden n_hidden">
                        <label for="addNode_experiment" class="col-sm-2 control-label">实验简介:</label>
                        <div class="col-sm-8">
                            <!-- <input type="text" class="form-control" id="addNode_experimentDesc">-->
                            <!--富文本框编辑器-->
                            <div id="alterNode_experimentDesc"></div>
                        </div>
                    </div>
                    <div class="form-group  hidden n_hidden" id="alter_file-pretty">
                        <label for="alterNode_experimentDoc" class="col-sm-2 control-label">实验文档:</label>
                        <div class="col-sm-8">
                            <!-- <input type="file" class="form-control" id="addNode_experimentDoc">-->
                            <input type="file" class="form-control" id="alterNode_experimentDoc">
                        </div>
                    </div>
                    <div class="form-group  hidden n_hidden">
                        <label for="alterNode_experimentAddr" class="col-sm-2 control-label">实验环境地址:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="alterNode_experimentAddr"
                                   placeholder="实验环境地址为放入服务器硬盘上的虚拟机文件地址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alterNode_NodeDesc" class="col-sm-2 control-label">节描述:</label>
                        <div class="col-sm-8">
                            <textarea rows="4" class="form-control" id="alterNode_NodeDesc"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--上传视频 模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="uploadVideoModel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">上传视频</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="upload_videoTitle" class="col-sm-2 control-label">视频标题:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="upload_videoTitle" placeholder="请输入视频标题">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="upload_videoTime" class="col-sm-2 control-label">视频时长:</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="upload_videoTime">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="upload_video" class="col-sm-2 control-label">视频上传:</label>
                        <div class="col-sm-10">
                            <input type="file" class="form-control" id="upload_video">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="upload_videoAddr" class="col-sm-2 control-label">视频地址:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="upload_videoAddr" placeholder="请输入视频上传(服务器)地址">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v=2.1.4)}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v=3.3.6)}"></script>
<!-- Bootstrap table -->
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!-- Sweet alert -->
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
        th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js}"></script>
<!-- Switchery -->
<script src="../../static/js/plugins/switchery/switchery.js"
        th:src="@{/static/js/plugins/switchery/switchery.js}"></script>
<!--suggest-->
<script src="../../static/js/plugins/suggest/bootstrap-suggest.min.js"
        th:src="@{/static/js/plugins/suggest/bootstrap-suggest.min.js}"></script>
<!-- SUMMERNOTE文本编辑器 -->
<script src="../../static/js/plugins/summernote/summernote.min.js"
        th:src="@{/static/js/plugins/summernote/summernote.min.js}"></script>
<script src="../../static/js/plugins/summernote/summernote-zh-CN.js"
        th:src="@{/static/js/plugins/summernote/summernote-zh-CN.js}"></script>
<!-- Prettyfile -->
<script src="../../static/js/plugins/prettyfile/bootstrap-prettyfile.js"
        th:src="@{/static/js/plugins/prettyfile/bootstrap-prettyfile.js}"></script>


<script>
    $(function () {
        /*初始化章表格*/
        $("#chapter_table").bootstrapTable({
            pagination: true,
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [5, 10],        //可供选择的每页的行数（*）
            search: true,
            toolbar: '#toolbar2',            //包含工具栏中的元素
            detailView: true,       //父子表
            uniqueId: "id",
            queryParams: function (params) {
                var temp = {
                    "a": 1,
                    "b": 2,
                    "limits": params.limit,
                    "offset": params.offset
                }
                return temp;
            },
            onPostBody: checkbox_table,
            url: "../../static/js/demo/training/chapter_table.json",
            columns: [{
                field: 'cid',
                title: 'ID',
                visible: false
            }, {
                field: 'courseName',
                title: '课程名',
                visible: false
            },
                {
                    field: 'id',
                    title: '章节编号',
                    align: "center"
                }, {
                    field: 'chapterName',
                    title: '章节名称',
                    align: "center"
                }, {
                    field: 'chapterDesc',
                    title: '章节描述',
                    align: "center"
                }, {
                    field: 'status',
                    title: '是否启用',
                    formatter: function (value, row, index) {
                        if (row.status == "启用") {
                            return "<input type='checkbox' class='js-switch' checked/>";
                        }
                        return "<input type='checkbox' class='js-switch'/>";
                    }
                }, {
                    align: "center",
                    width: '20%',
                    title: "操作",
                    events: {
                        "click .alterBtn": function (e, value, row, index) {
                            //把表格数据回显到模态框中
                            $("#alter_courseName").val(row.courseName);
                            $("#alter_chapterNumber").val(row.id);
                            $("#alter_chapterName").val(row.chapterName);
                            $("#alter_chapterDesc").val(row.chapterDesc);
                            if (row.status == '启用') {
                                setSwitchery(switchery, true);
                            } else {
                                setSwitchery(switchery, false);
                            }
                            $("#alterChapterModel").modal();
                        },
                        "click .deleteBtn": function (e, value, row, index) {
                            //alert("确定要删除吗？");
                            //采用 sweetalert 组件
                            swal({
                                title: "您确定要删除这条数据吗",
                                text: "删除章节编号" + row.id + "，请谨慎操作！",
                                type: "warning",
                                showCancelButton: true,
                                confirmButtonColor: "#DD6B55",
                                confirmButtonText: "删除",
                                cancelButtonText: "取消",
                                closeOnConfirm: false
                            }, function () {
                                // todo
                                console.log("要删除的记录是：" + row.id);
                                swal("删除成功！", "您已经永久删除了这条信息。", "success");
                            });
                        },
                        "click .addBtn": function (e, value, row, index) {
                            $("#addNode_chapterName").val(row.chapterName);
                            $("#addNodeModel").modal();
                        },
                    },
                    formatter: function (value, row, index) {
                        return [
                            "<button type='button' class='alterBtn btn btn-primary btn-xs' style='margin-right: 15px;'><i class='fa fa-edit'></i>修改</button>",
                            "<button type='button' class='deleteBtn btn btn-danger btn-xs' style='margin-right: 15px;'><i class='fa fa-trash'></i>删除</button>",
                            "<button type='button' class='addBtn btn btn-info btn-xs' style='margin-right: 15px;'><i class='fa fa-plus'></i>添加节</button>"
                        ].join("");
                    },
                }],
            //注册加载子表的事件。注意下这里的三个参数！
            onExpandRow: function (index, row, $detail) {
                initSubTable(index, row, $detail);
            },
        });
        //初始化子表
        let initSubTable = function (index, row, $detail) {
            let parentId = row.id;
            let cur_table = $detail.html('<table id="nodeTable"></table>').find('table');
            $(cur_table).bootstrapTable({
                url: '../../static/js/demo/training/chapter_subTable.json',
                //   method: 'get',
                queryParams: {id: parentId},
                ajaxOptions: {id: parentId},
                uniqueId: "id",
                striped: true, //是否显示行间隔色
                sidePagination: "client",   //分页不请求后台
                pageNumber: 1,
                height: $(window).height() - 450,
                columns: [{
                    field: 'jid',
                    title: '节记录id',
                    visible: false
                }, {
                    field: 'id',
                    title: '节编号',
                    width: '10%',
                    align: "center"
                }, {
                    field: 'nodeName',
                    title: '节名称',
                    align: "center"
                }, {
                    field: 'chapterName',
                    title: '章名称',
                    visible: false
                }, {
                    field: 'experiment',
                    title: '是否实验',
                    visible: false
                }, {
                    field: 'experimentDesc',
                    title: '实验简介',
                    visible: false
                }
                    , {
                        field: 'videoVisible',
                        title: '未登录不可见',
                        visible: false,
                        /* formatter: function (value, row, index) {
                             if (row.videoVisible == "可见") {
                                 return "<input type='checkbox' class='videoVisible' checked/>";
                             }
                             return "<input type='checkbox' class='videoVisible'/>";
                         }*/
                    }
                    , {

                        field: 'nodeDesc',
                        title: '节描述',
                        align: "center"
                    }, {
                        field: 'operation',
                        align: 'center',
                        width: '20%',
                        title: '操作',
                        events: {
                            "click .editNodeBtn": function (e, value, row, index) {
                                //隐藏id
                                $("#alterNode_chapterName").val(row.chapterName);
                                $("#alterNode_nodeNum").val(row.id);
                                $("#alterNode_nodeName").val(row.nodeName);
                                $("#alterNode_experiment").val(row.experiment);
                                //将是否开启实验的隐藏控件显示
                                if (row.experiment != "开启实验") {
                                    $(".n_hidden").addClass("hidden", "hidden");
                                } else {
                                    $(".n_hidden").removeClass("hidden", "hidden");
                                }
                                $("#alterNode_experimentDesc").val(row.experimentDesc);
                                //还有两个控件没有回显数据。
                                $("#alterNode_NodeDesc").val(row.nodeDesc);
                                //弹出模态框
                                $("#alterNodeModel").modal();
                                //弹出模态框

                            },
                            "click .deleteNodeBtn": function (e, value, row, index) {
                                //采用 sweetalert 组件
                                swal({
                                    title: "您确定要删除这条数据吗",
                                    text: "删除" + row.id + "，请谨慎操作！",
                                    type: "warning",
                                    showCancelButton: true,
                                    confirmButtonColor: "#DD6B55",
                                    confirmButtonText: "删除",
                                    cancelButtonText: "取消",
                                    closeOnConfirm: false
                                }, function () {
                                    // todo
                                    console.log("要删除的记录是：" + row.id);
                                    swal("删除成功！", "您已经永久删除了这条信息。", "success");
                                });

                            },
                            "click .uploadVideoBtn": function (e, value, row, index) {
                                //TODO
                                //弹出模态框
                                $("#uploadVideoModel").modal();
                                //弹出模态框

                            }
                            , "click .unLoginVisibleBtn": function (e, value, row, index) {
                                //判断 是否可见，再改变图标状态
                                if (row.videoVisible == '可见') {
                                    $("#lock").removeClass("fa-lock").addClass("fa-unlock");
                                } else {
                                    $("#lock").removeClass("fa-unlock").addClass("fa-lock");
                                }
                                //发送异步请求
                                /*   $.ajax({
                                   url: '?id="+row.id+"+"+row.videoVisible+"',
                                   type: "get",
                                   success: function () {

                                   },
                                   error: function () {

                                   }
                               })*/
                            }
                        },
                        formatter: function (value, row, index) {
                            return [
                                "<button type='button' class='editNodeBtn btn btn-primary btn-xs' title='修改' style='margin-right: 15px;'><i class='fa fa-edit'></i> </button>",
                                "<button type='button' class='deleteNodeBtn btn btn-danger btn-xs' title='删除' style='margin-right: 15px;'><i class='fa fa-trash'></i> </button>",
                                "<button type='button' class='uploadVideoBtn btn btn-danger btn-xs' title='视频上传' style='margin-right: 15px;'><i class='fa fa-wrench'></i> </button>"
                                , "<button type='button' class='unLoginVisibleBtn btn btn-danger btn-xs' title='未登录可观看' style='margin-right: 15px;'><i class='fa fa-lock' id='lock'></i> </button>"
                            ].join("");
                        }
                    }],
                //无线循环取子表，直到子表里面没有记录
                onExpandRow: function (index, row, $Subdetail) {
                    initSubTable(index, row, $Subdetail);
                }
            });
        }
    });
</script>
<script>
    let switchery;

    function checkbox_table() {
        $(".js-switch,#alter_status,#videoVisible").each(function (index, element) {
            console.log(element);
            //判断 element是否已经是 switchery 组件了
            if ($(element).attr("data-switchery") != 'true') {
                //重新创建switchery对象
                switchery = new Switchery(element, {size: 'normal'});
                //绑定事件, 以 element 为参数，以便里面的代码通过 event.data 来获取此element对象，并进一步拿到ic的值
                $(element).on('change', element, function (event) {
                    //todo 发送请求到服务端，更新状态
                    alert($(event.data).val() + "--------------" + element.checked);
                });
            } else {
                console.log("已经添加过了");
            }
        });
    }

    /*改变滑动按钮的状态*/
    function setSwitchery(switchElement, checkedBool) {
        if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
            switchElement.setPosition(true);
            switchElement.handleOnchange(true);
        }
    }
</script>
<script>
    /*suggest */
    $("#addNode_experiment,#alterNode_experiment").bsSuggest({
        data: {
            "value": [
                {
                    "keyName": "开启实验",
                }, {
                    "keyName": "不开启实验",
                }
            ]
        }
    })
    /*富文本框编辑器*/
    $(function () {
        $('#addNode_experimentDesc,#alterNode_experimentDesc').summernote({
            height: "130px",
            fontsize: '18',
            styleWithSpan: false,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol']]
            ]

        });
    })
    /*给是否实验添加失去焦点事件*/
    $("#addNode_experiment,#alterNode_experiment").blur(function () {
        if ($(this).val() != "开启实验") {
            $(".n_hidden").addClass("hidden", "hidden");
        } else {
            $(".n_hidden").removeClass("hidden", "hidden");
        }
    });
    /*初始化文件上传*/
    $('#addNode_experimentDoc,#alterNode_experimentDoc,#upload_video').prettyFile();
</script>
<script>
    $(function () {
        /*添加章*/
        $("#addChapterBtn").click(function () {

            $("#addChapterModel").modal();
        })
        /*添加章模态框 保存 单击事件*/
        $("#save_chapter").click(function () {
            $("#addChapterForm").submit();
            alert("添加章成功");
        })
    })

</script>
</body>
</html>